﻿@using System.Web.Script.Serialization
@{
    ViewBag.Title = "Product";
}

<h2>Product</h2>


<label>name</label>
<span data-bind="text:Name"></span>

<label>short description</label>
<span data-bind="text:ShortDescription"></span>

<label>full description</label>
<span data-bind="text:FullDescription"></span>


@Html.Partial("SingleProduct.ProductPicture")

@Html.Partial("SingleProduct.ProductSpecificationAttribute")

<!-- ko if: ProductVariantModels.Length==1 -->
   @Html.Partial("SingleProduct.DefaultProductVariant") 
<!-- /ko -->

<!-- ko ifnot: ProductVariantModels.Length==1 -->
    @Html.Partial("SingleProduct.ProductVariant")
<!-- /ko -->




@{
    var model = ViewBag.Model;

    var jsonStr = new HtmlString(new JavaScriptSerializer().Serialize(model));
}

@section scripts{
    
    <script>
        var init = @jsonStr;

        function DefaultPictureModel(imageUrl, fullSizeImageUrl, title) {

            var self = this;
            self.ImageUrl = ko.observable(imageUrl);
            self.FullSizeImageUrl = ko.observable(fullSizeImageUrl);
            self.Title = ko.observable(title);
        }

        function ProductVariantAttributeModel(id, productAttributeId, name, description, attributeControlType, values) {
            var self = this;
            self.Id = ko.observable(id);
            self.ProductAttributeId = ko.observable(productAttributeId);
            self.Name = ko.observable(name);
            self.Description = ko.observable(description);
            self.AttributeControlType = ko.observable(attributeControlType);
            self.ProductVariantAttributeValueModels = ko.observableArray(values);
            self.SelectedAttributeValue = ko.observable();
        }

        function ProductVariantAttributeValueModel(id, name, displayOrder) {

            var self = this;
            self.Id = ko.observable(id);
            self.Name = ko.observable(name);
            self.DisplayOrder = ko.observable(displayOrder);
        }

        function ProductVariantModel(id, name, sku, description, stockQuantity,
            pictureModel, productVariantAttributes, price) {
            var self = this;
            self.Id = ko.observable(id);
            self.Name = ko.observable(name);
            self.Sku = ko.observable(sku);
            self.Description = ko.observable(description);
            self.StockQuantity = ko.observable(stockQuantity);
            self.PictureModel = ko.observable(pictureModel);
            self.Price = ko.observable(price);
            self.SelectQuantity = ko.observable(1);
            self.ProductVariantAttributes = ko.observable(productVariantAttributes);
        }

        function PictureModel(imageUrl, fullsizeImageUrl, title) {
            var self = this;
            self.ImageUrl = ko.observable(imageUrl);
            self.FullSizeImageUrl = ko.observable(fullsizeImageUrl);
            self.Title = ko.observable(title);
        }

        function ProductSpecificationAttributeModel(attributeName, attributeOptionName) {
            var self = this;
            self.AttributeName = attributeName;
            self.AttributeOptionName = attributeOptionName;
        }

        function AddToCartProductModel(productVariantId, selectQuantity, pvAttributeValues) {
            var self = this;
            self.ProductVariantId = productVariantId;
            self.Quantity = selectQuantity;
            self.ProductVariantAttributeValueIds = pvAttributeValues;
        }

        function ProductDetailsModel() {
            var self = this;
            self.Id = ko.observable(init.Id);
            self.Name = ko.observable(init.Name);
            self.ShortDescription = ko.observable(init.ShortDescription);
            self.FullDescription = ko.observable(init.FullDescription);


            var tempProductPictures = $.isEmptyObject(init.PictureModels) ? [] : $.map(init.PictureModels, function(a) {
                return new PictureModel(a.ImageUrl, a.FullSizeImageUrl, a.Title);
            });

            self.PictureModels = ko.observableArray(tempProductPictures);

            var tempDefaultPicture = new PictureModel(init.DefaultPictureModel.ImageUrl,
                init.DefaultPictureModel.FullSizeImageUrl,
                init.DefaultPictureModel.Title);

            self.DefaultPictureModel = ko.observable(tempDefaultPicture);

            var tempProductVariants = $.isEmptyObject(init.ProductVariantModels) ? [] : $.map(init.ProductVariantModels, function(a) {
                var tempPvPicture = new PictureModel(a.PictureModel.ImageUrl, a.PictureModel.FullSizeImageUrl, a.PictureModel.Title);

                var tempPvAttributes = $.isEmptyObject(a.ProductVariantAttributes) ? [] : $.map(a.ProductVariantAttributes, function(c) {
                    var tempPvAttributeValues = $.isEmptyObject(c.ProductVariantAttributeValueModels) ? [] : $.map(c.ProductVariantAttributeValueModels, function(d) {
                        return new ProductVariantAttributeValueModel(d.Id, d.Name, d.DisplayOrder);
                    });
                    return new ProductVariantAttributeModel(c.Id, c.ProductAttributeId, c.Name, c.Description, c.AttributeControlType, tempPvAttributeValues);
                });
                return new ProductVariantModel(a.Id, a.Name, a.Sku, a.Description, a.StockQuantity, tempPvPicture, tempPvAttributes, a.Price);
            });

            self.ProductVariantModels = ko.observableArray(tempProductVariants);


            var tempProductSpecificationAttributes = $.isEmptyObject(init.SpecificationAttributeModels) ? [] : $.map(init.SpecificationAttributeModels, function(a) {
                return new ProductSpecificationAttributeModel(a.AttributeName, a.AttributeOptionName);
            });

            self.SpecificationAttributeModels = ko.observableArray(tempProductSpecificationAttributes);


            self.AddToCart = function(pv) {
                var pvValueIds = [];
              
                
                $.each(pv.ProductVariantAttributes(), function (idx, item) {
                    var selectedAttributeValue = item.SelectedAttributeValue();
                    pvValueIds.push(selectedAttributeValue.Id());
                });
                
               
                var cartModel = new AddToCartProductModel( pv.Id(),pv.SelectQuantity(),  pvValueIds);
                $.ajax({
                    url: "/api/ShoppingCartApi/AddProductVariantToCart",
                    type: 'post',
                    data: ko.toJSON(cartModel),
                    contentType: 'application/json',
                    success: function(result) {

                        if (result.Status == "0") {
                            alert("保存成功");
                        } else {
                            alert("保存失败：" + result.Msg);
                        }
                    }
                });
            };
        }

        var vm = new ProductDetailsModel();
        ko.applyBindings(vm);

    </script>
}